<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>暴打地鼠</title>

    <style>
        .container {
            width: 600px;
            height: 400px;
            margin: 50px auto;
            border: 1px solid #ddd;
            text-align: center;
        }
        
        .game-top {
            padding-top: 10px;
            width: 100%;
            height: 90px;
        }
        
        .game-top p {
            margin: 5px;
        }
        
        .game-content {
            overflow: auto;
            width: 100px;
            border-top: 1px solid #ddd;
            background-color: #ddf;
        }
        
        .game-content ul {
            list-style: none;
        }
        
        .game-content li {
            float: left;
            margin-top: 50px;
            margin-left: 30px;
            width: 100px;
            height: 50px;
            border-radius: 50%;
            background-color: #67d0b4;
            box-shadow: 0 0 50px #706565 inset;
        }
        
        .game-content li:last-child {
            margin-bottom: 50px;
        }
        
        .game-content div {
            position: relative;
            margin-top: -15px;
            margin-left: 25px;
            width: 50px;
            height: 70px;
            border-radius: 50%/40%;
            background-color: #dfb25d;
            opacity: 0;
        }
        
        .game-content div.good {
            background-color: #dfb25d;
        }
        
        .game-content div.good[clicked="1"]::after {
            content: "√";
            line-height: 70px;
            font-size: 40px;
            color: #0ad845;
        }
        
        .game-content div.bad {
            background-color: #a48f5c;
        }
        
        .game-content div.bad[clicked="1"]::after {
            content: "×";
            line-height: 70px;
            font-size: 40px;
            color: #db1536;
        }
    </style>
</head>

<body>

    <div class="container">
        <h3>暴打地鼠</h3>

        <div class="game-top">
            <p><input type="button" value="开始游戏" id="game-start"></p>
            <p>得分：<span id="game-score">0</span></p>
            <p>剩余时间：<span id="game-time">60</span></p>
        </div>
        <div class="game-content">
            <ul>
                <li>
                    <div></div>
                </li>
                <li>
                    <div></div>
                </li>
                <li>
                    <div></div>
                </li>
                <li>
                    <div></div>
                </li>
                <li>
                    <div></div>
                </li>
                <li>
                    <div></div>
                </li>
                <li>
                    <div></div>
                </li>
                <li>
                    <div></div>
                </li>
                <li>
                    <div></div>
                </li>
            </ul>
        </div>
        <!-- <p>ps:请往死里打</p> -->
    </div>
</body>

</html>